<template>
  <div class="categories">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-button type="primary" @click="add_btn">添加角色</el-button>
      <!-- 表格 -->
      <tree-table style="margin: 15px 0;" :border="true" show-index index-text="#" :expand-type="false"
        :selection-type="false" :data="tableData" :columns="columns">
        <template slot="isok" slot-scope="scope">
          <i style="color:lightgreen" class="el-icon-success" v-if="scope.row.cat_deleted === false"></i>
          <i style="color:red" class="el-icon-error" v-else></i>
        </template>
        <template slot="sort" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
          <el-tag v-else-if="scope.row.cat_level == 1" type="success">二级</el-tag>
          <el-tag v-else type="warning">三级</el-tag>
        </template>
        <template slot="operation" slot-scope="scope">
          <el-button @click="set_btn(scope.row)" size="mini" type="primary" icon="el-icon-edit">编辑
          </el-button>
          <el-button @click="delete_btn(scope.row.cat_id)" size="mini" type="danger" icon="el-icon-delete">删除
          </el-button>
        </template>
      </tree-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pagedata.pagenum" :page-sizes="[2, 5, 10]" :page-size="pagedata.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="pagedata.total">
      </el-pagination>
      <!-- 添加 -->
      <el-dialog title="添加分类" @close="add_close" :visible.sync="add_dialog" width="50%">
        <el-form ref="add_ref" label-width="90px" :model="add_from" :rules="add_rules">
          <el-form-item label="分类名称 :" prop="cat_name">
            <el-input v-model="add_from.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类 :">
            <el-cascader ref="catalogue" style="width: 100%;" @change="selecechange" v-model="addselect"
              :options="fatherlist" :props="add_props" clearable>
            </el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="add_dialog = false">取 消</el-button>
          <el-button type="primary" @click="add_dialog_ok">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog title="修改分类" @close="set_close" :visible.sync="set_dialog" width="40%">
        <el-form ref="set_ref" label-width="90px" :model="set_from" :rules="set_rules">
          <el-form-item label="分类名称 :" prop="cat_name">
            <el-input v-model="set_from.cat_name"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="set_dialog = false">取 消</el-button>
          <el-button type="primary" @click="set_dialog_ok">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 删除 -->
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pagedata: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
        total: 0,
      },
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name',
        },
        {
          label: '是否有效',
          align: 'center',
          type: 'template',
          template: 'isok',
        },
        {
          label: '排序',
          align: 'center',
          type: 'template',
          template: 'sort',
        },
        {
          label: '操作',
          align: 'center',
          type: 'template',
          template: 'operation',
        },

      ],
      //修改
      set_dialog: false,
      set_from: {
        cat_name: 1,
      },
      set_rules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
        ]
      },
      //添加
      add_dialog: false,
      add_from: {
        cat_name: '',
        cat_pid: 0,
        cat_level: 0,

      },
      add_rules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
        ],
      },
      //父级分类列表
      fatherlist: [],
      add_props: {
        label: 'cat_name',
        value: 'cat_id',
        children: 'children',
        expandTrigger: 'hover',
        checkStrictly: true
      },
      addselect: [],
    }
  },
  created() {
    this.initpage();
  },
  methods: {
    //获取页面表格数据
    async initpage() {
      let { data: res } = await this.$http.get("categories", { params: this.pagedata });
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.tableData = res.data.result;
      this.pagedata.total = res.data.total;
    },
    //分页
    handleSizeChange(v) {
      this.pagedata.pagesize = v;
      this.pagedata.pagenum = 1
      this.initpage();
    },
    //翻页
    handleCurrentChange(v) {
      this.pagedata.pagenum = v;
      this.initpage();
    },
    /*
      修改
    */

    //修改按钮
    set_btn(row) {
      this.set_from = row;
      this.set_dialog = true;
    },
    //修改弹框关闭事件
    set_close() {

    },
    //修改确定按钮
    set_dialog_ok() {
      this.$refs.set_ref.validate(async v => {
        if (!v) return this.$message.error('表单校验错误');
        let { data: res } = await this.$http.put(`categories/${this.set_from.cat_id}`, { cat_name: this.set_from.cat_name });
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
        //页面重绘
        this.initpage();
        this.set_dialog = false;
      })
    },

    /*
      添加
    */

    //添加按钮
    add_btn() {
      this.getfather();
      this.add_dialog = true;
    },
    //添加弹框关闭事件
    add_close() {
      this.$refs.add_ref.resetFields();
      this.addselect = [];
      this.add_from.cat_pid = this.add_from.cat_level = 0;
    },
    //确定按钮
    async add_dialog_ok() {
      this.$refs.add_ref.validate(async v => {
        if (!v) return this.$message.error('表单校验错误');
        let { data: res } = await this.$http.post("categories", this.add_from);
        if (res.meta.status !== 201) return this.$message.error(res.meta.msg);
        this.initpage();
        this.add_dialog = false;
      })
    },
    //获取父级分类
    async getfather() {
      let { data: res } = await this.$http.get("categories", { params: { type: 2 } });
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.fatherlist = res.data;
    },
    //select值改变事件
    selecechange() {
      if (this.addselect.length > 0) {
        this.add_from.cat_pid = this.addselect[this.addselect.length - 1];
        this.add_from.cat_level = this.addselect.length;
      } else {
        this.add_from.cat_pid = 0
        this.add_from.cat_level = 0
      }
      //选中后关闭下拉框
      this.$refs.catalogue.dropDownVisible = false
    },
    /*
       删除
    */

    //删除按钮
    delete_btn(id) {

      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //删除操作
        let { data: res } = await this.$http.delete(`categories/${id}`);
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
        this.initpage();
        this.$message.success('删除成功');
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // });
      });
    }
  },
}
</script>

<style>
</style>